﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>dualSlider</title>
        
    <meta name="description" id="MetaDescription" content="" />
    <meta name="keywords" id="MetaKeywords" content="" />
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<meta name="language" content="en" />
	
	<link rel="stylesheet" type="text/css" media="all" href="css/clearfix.css" />
	<link rel="stylesheet" type="text/css" media="all" href="css/jquery.dualSlider.0.2.css" />
    <link rel="stylesheet" href="../0509.css" text="text/css" media="screen" />
    <link rel="stylesheet" href="../fancyapps-fancyBox-2.0/source/helpers/jquery.fancybox-thumbs.css" text="text/css" media="screen" />
    <link rel="stylesheet" href="../fancyapps-fancyBox-2.0/source/jquery.fancybox.css" text="text/css" media="screen" />

	<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="scripts/jquery.timers-1.2.js" type="text/javascript"></script>
	<script src="scripts/jquery.dualSlider.0.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../jquery-1.7.2.js"></script>
    <script type="text/javascript" src="../jquery-ui-1.8.20.custom.min.js"></script>
    <script type="text/javascript" src="../accordion/javascript/accordion.js"></script>
    <script type="text/javascript" src="../accordion/javascript/effects.js"></script>
    <script type="text/javascript" src="../fancyapps-fancyBox-2.0/source/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="../fancyapps-fancyBox-2.0/source/helpers/jquery.fancybox-thumbs.js"></script>
    
	<script language="javascript">
	<!--
		function getRef(id) {
		if (isDOM) return document.getElementById(id);
		if (isIE4) return document.all[id];
		if (isNS4) return document.layers[id];
}
	//-->
</script>

	<script type="text/javascript">
		
		$(document).ready(function() {
			
			$(".carousel").dualSlider({
				auto:true,
				autoDelay: 6000,
				easingCarousel: "swing",
				easingDetails: "easeOutBack",
				durationCarousel: 1000,
				durationDetails: 600
			});
			
		});
		
		
	</script>
	
</head>

<body>
	<div class="logo">
 		<img src="../logo_w_des.png" width="175" height="37">
        	<div id="sns_icon">
            	<span><strong> Share to </strong></span>&nbsp;&nbsp;
       			<img src="../facebook_share_n.png" width="30" height="25" />&nbsp;&nbsp;&nbsp;&nbsp;
        		<img src="../twitter_share_n.png" width="30" height="25" />
          	</div>
    </div>
    
	<div class="wrapper clearfix">
		
		<div class="carousel clearfix">

			<div class="panel">
				
				<div class="details_wrapper">
					
					<div class="details">
					
						<div class="detail">
							<h2 class="Lexia-Bold"><a href="#">가나다라마바</a><br />
							현철이 바보 멍충이 쪼다입니다.ㅎㅎㅎㅎ 테스트임니다.</h2>
							<a href="#" title="Read more" class="more">Read more</a>
						</div><!-- /detail -->
						
						<div class="detail">
							<h2 class="Lexia-Bold"><a href="#">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit. </h2>
							<a href="#" title="Read more" class="more">Read more</a>
						</div><!-- /detail -->
						
						<div class="detail">
							<h2 class="Lexia-Bold"><a href="#">Aenean massa</a>. Cum sociis natoque penatibus et magnis dis parturient montes</h2>
							<a href="#" title="Read more" class="more">Read more</a>
						</div><!-- /detail -->
						
					
			</div><!-- /details -->
					
				</div><!-- /details_wrapper -->
				
				<div class="paging">
					<div id="numbers"></div>
					<a href="javascript:void(0);" class="previous" title="Previous" >Previous</a>
					<a href="javascript:void(0);" class="next" title="Next">Next</a>
				</div><!-- /paging -->
				
				<a href="javascript:void(0);" class="play" title="Turn on autoplay">Play</a>
				<a href="javascript:void(0);" class="pause" title="Turn off autoplay">Pause</a>
				
			</div><!-- /panel -->
	
			<div class="backgrounds">
				
				<div class="item item_1">
					<object width="604" height="337"><param name="movie" value="http://www.youtube.com/v/a2bqcxqjnRA?version=3&amp;hl=ko_KR&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/a2bqcxqjnRA?version=3&amp;hl=ko_KR&amp;rel=0" type="application/x-shockwave-flash" width="604" height="337" allowscriptaccess="always" allowfullscreen="true"></embed></object>
				</div><!-- /item -->
				
				<div class="item item_2">
					<object width="604" height="340"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12257932&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=12257932&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="604" height="340" wmode="transparent"></embed></object>
				</div><!-- /item -->
				
				<div class="item item_3">
					
				</div><!-- /item -->
				
			</div><!-- /backgrounds -->
			
			
		</div><!-- /carousel --> 
		
		
	</div><!-- /wrapper -->
<script type="text/javascript">
	$(function() {
		$( "#accordion" ).accordion({
			autoHeight: false,
			navigation: true
		});
	});
</script>

<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script>

<script type="text/javascript">
	$(document).ready(function() {
	$(".fancybox-thumb").fancybox({
		prevEffect	: 'none',
		nextEffect	: 'none',
		helpers	: {
			title	: {
				type: 'outside'
			},
			overlay	: {
				opacity : 0.8,
				css : {
					'background-color' : '#000'
				}
			},
			thumbs	: {
				width	: 50,
				height	: 50
			}
		}
	});
});
</script>
   		<div class="container">
		<div role="tablist" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" id="accordion">
		<h3 tabindex="0" aria-selected="true" aria-expanded="true" role="tab" class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"><span class="ui-icon ui-icon-triangle-1-s"></span><a tabindex="-1" href="#">Section 1</a></h3>
		<div style="display: block; overflow: visible; padding-top: 0px; padding-bottom: 0px;" role="tabpanel" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
        	<div id="img_group">
        		<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm7.staticflickr.com/6111/6285920681_67917e8062_b.jpg" title="walk in the park (ewitsoe)">
				<img class="contents_img" src="0510_front_sample_files/6285920681_67917e8062_m.jpg" alt="">
				</a>
				<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm7.staticflickr.com/6048/6370091853_fa920568e4_b.jpg" title="Tree and Bench, Newlands Corner (craig.denford)">
					<img class="contents_img" src="0510_front_sample_files/6370091853_fa920568e4_m.jpg" alt="">
				</a>
				<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg" title="Fog (giulio bassi q°ן°p)">
					<img class="contents_img" src="0510_front_sample_files/6347065961_bb73745e70_m.jpg" alt="">
				</a>	
				<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm7.staticflickr.com/6221/6358006563_7793474bf9_b.jpg" title="autumn leaves (andrew evans.)">
					<img class="contents_img" src="0510_front_sample_files/6358006563_7793474bf9_m.jpg" alt="">
             	</a>
          	</div>
        <p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		</p>
        </div>
		
        <h3 tabindex="-1" aria-selected="false" aria-expanded="false" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-e"></span><a tabindex="-1" href="#">Section 2</a></h3>
        <div style="display: none; overflow: visible; padding-top: 0px; padding-bottom: 0px;" role="tabpanel" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <p>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
		</p>
        </div>
        
		<h3 tabindex="-1" aria-selected="false" aria-expanded="false" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-e"></span><a tabindex="-1" href="#">Section 3</a></h3>
		<div style="display: none; overflow: visible; padding-top: 0px; padding-bottom: 0px;" role="tabpanel" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
		<p>
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		</p>
			<ul>
				<li>List item one</li>
				<li>List item two</li>
				<li>List item three</li>
			</ul>
		</div>
	
    	<h3 tabindex="-1" aria-selected="false" aria-expanded="false" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-e"></span><a tabindex="-1" href="#">Section 4</a></h3>
		<div style="display: none; overflow: visible; padding-top: 0px; padding-bottom: 0px;" role="tabpanel" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
		<p>
		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
		mauris vel est.
		</p>
		<p>
		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos himenaeos.
		</p>
		</div>
		</div>
	</div>

</body>

</html>